<template>
    <el-table :data="props.item.paramDataModel" :border="true" style="width: 100%;">
        <el-table-column prop="meshName" label="主面部件名称" width="120" class="meshName">
            <template #default="scope">
                <ul>
                    <li>{{ scope.row.faces1Widget.meshName }}</li>
                </ul>
                <!-- <div v-if="scope.row.meshName.length == 0" class="tc"><span class="f12 c9" style="color: #999;">暂无数据</span>
                </div> -->
            </template>
        </el-table-column>
        <el-table-column prop="coordinate" label="主面坐标" min-width="150">
            <template #default="scope">
                <ul>
                    <li>{{ scope.row.faces1Widget.coordinate }}</li>
                </ul>
            </template>
        </el-table-column>
        <el-table-column prop="coordinate" label="主面名称" width="180">
            <template #default="scope">
                <el-form :model="scope.row.faces1Widget" ref="prItemRef1" >
                    <el-form-item :rules="[
                        { required: true, message: '请输入主面名称', trigger: 'blur' },
                        { type: 'string', max: scope.row.faces1Widget.dataMaxLength, message: '', trigger: 'blur' }
                    ]" prop="faces1">
                    <!-- <div class="info" >* 请勿输入中文，避免与其他面名称重复</div> -->
                        <el-input clearable :maxlength="scope.row.faces1Widget.dataMaxLength"
                            v-model="scope.row.faces1Widget.faces1"
                            v-on:input="scope.row.faces1Widget.faces1 = scope.row.faces1Widget.faces1.replace(/[\u4e00-\u9fa5]/gi, '')"
                            placeholder="请输入内容" />
                    </el-form-item>
                </el-form>
            </template>

        </el-table-column>

        <el-table-column prop="meshName" label="从面部件名称" width="120" class="meshName">
            <template #default="scope">
                <ul>
                    <li>{{ scope.row.faces2Widget.meshName }}</li>
                </ul>

            </template>
        </el-table-column>
        <el-table-column prop="coordinate" label="从面坐标" min-width="150">
            <template #default="scope">
                <ul>
                    <li>{{ scope.row.faces2Widget.coordinate }}</li>
                </ul>
            </template>
        </el-table-column>
        <el-table-column prop="coordinate" label="从面名称" width="180">
            <template #default="scope">
                <el-form :model="scope.row.faces2Widget" ref="prItemRef2"  >
                    <el-form-item :rules="[
                        { required: true, message: '请输入从面名称', trigger: 'blur' },
                        { type: 'string', max: scope.row.faces2Widget.dataMaxLength, message: '', trigger: 'blur' }
                    ]" prop="faces2">
                   <!--  <div class="info" >* 请勿输入中文，避<br>免与其他面名称重复</div> -->
                        <el-input clearable :maxlength="scope.row.faces2Widget.dataMaxLength"
                            v-model="scope.row.faces2Widget.faces2"
                            v-on:input="scope.row.faces2Widget.faces2 = scope.row.faces2Widget.faces2.replace(/[\u4e00-\u9fa5]/gi, '')"
                            placeholder="请输入内容" />
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>


        <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
                <el-dropdown>
                    <el-button type="primary">
                        操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="addModelPoint(scope.$index, 1)">添加主面</el-dropdown-item>
                            <el-dropdown-item @click="addModelPoint(scope.$index, 2)">添加从面</el-dropdown-item>
                            <el-dropdown-item
                                @click="handleDeleteParams(scope.$index, scope.row, item.appParams)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <!-- <el-button type="primary" @click="addModelPoint(scope.$index, 1)">添加主面</el-button>
                <el-button type="primary" @click="addModelPoint(scope.$index, 2)">添加从面</el-button>
                <el-button type="danger" @click="handleDeleteParams(scope.$index, scope.row, item.appParams)">删除</el-button>
             --></template>
        </el-table-column>
    </el-table>
    <div class="info" >* 请勿输入中文，避免与其他面名称重复</div>
</template>
<style scoped>
.info{position:static;margin-top:10px;color:#F56C6C;}
</style>
<script setup>
import { ref, defineExpose } from 'vue'
import plusBtn from '@/components/plusBtn/Index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({
    item: {
        type: Object,
        default: {},
    }
})
const emits = defineEmits(['modifyParentData']);
//打开表单的下拉框
function openFrame(item) {
    item.frameStatus = true
}
function preventFun() { }
//添加数组参数
function handleAddListParam(item) {
    item.dataModelList.push(undefined)
}
//删除map格式数据项
function deleteMapData(list, index) {
    list.splice(index, 1)
}

//添加模型的选点
function addModelPoint(index, facesIndex) {
    emits('modifyParentData', { dialogFormVisible: true, crtLine: index, facesIndex, })
}

//删除行数
function handleDeleteParams(index, row, params) {
    console.log('index8', index)
    ElMessageBox.confirm(
        '你是否确定删除本条数据',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        props.item.paramDataModel.splice(index, 1)
    })
        .catch(() => {

        })

}
//返回给父组件的验证状态
let valid = true
//表单获取
const prItemRef1 = ref(null)
const prItemRef2 = ref(null)
//表单验证回调
function validator(isValid, invalidFields) {
    // 认证不通过
    if (!isValid) {
        valid = false
    }
}
//表单认证
function checkForm() {
    prItemRef1.value.validate(validator)
    prItemRef2.value.validate(validator)
    return valid
}
defineExpose({ checkForm })


</script>